<template>
  <div
  class="root tc"
  ref="rootDom"
  :class="{'night': ''}"
  :style="{backgroundImage: themeConfig.bgUrl && `url(${themeConfig.bgUrl})`}"
  >
    <Header
    :class="{ 'fixed': isHeadFixed, 'unfixed': scrollObj.value > 0 }"
        @on-night=" (val) => isNight = val"
    ></Header>
    <Cover v-show="$route.path == '/'" />
    <div class="header-bg" v-show="$route.meta.showBg"></div>
    <Notice class="w1200" v-show="$route.path == '/'" />
    <div
    class="root-main clearfix"
    :style="{
        paddingTop: $route.path == '/' ? banner && banner.length ? '20px' : '100px' : '100px',
    }"
    v-show="showLayout"
    :class="{ 'active': isHeadFixed }"
>
        <Aside
        class="side-menu fr"
        v-show="sideWhiteRoute.includes($route.path)"
        :class="{ 'fixed': isAsideFixed && $route.path !== '/', 'active': isHeadFixed && $route.path !== '/' }"
        ></Aside>
        <!-- :style="{paddingTop: isHeadFixed || (scrollObj.value > 0) ? '100px' : '20px'}" -->
        <div class="root-main-container fl tc" :style="{width: sideWhiteRoute.includes($route.path) ? '':'1200px'}">
            <transition name="default" mode="out-in">
                <Nuxt />
            </transition>
        </div>
    </div>
    <Footer></Footer>
    <el-backtop :right="200" :bottom="100">
        <div
        style="{
            height: 100%;
            width: 100%;
            background-color: var(--primary-color);
            border-radius: 100px;
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 42px;
            font-size: 14px;
            color: #ffffff;
        }"
        >
        <i class="el-icon-arrow-up"></i>
        </div>
    </el-backtop>
    <el-drawer
    :visible.sync="showThemeDialog"
    :direction="'rtl'"
    :with-header="false"
    modal-append-to-body
    :size="500"
    custom-class="theme-dialog-wrapper"
    :before-close="() => showThemeDialog = false"
    >
    <!-- <div class="title" slot="title">
        <div class="icon-close" @click="() => showThemeDialog = false">×</div>
        选择主题
    </div> -->
        <Theme @click.prevent @click.stop></Theme>
    </el-drawer>
    <!-- 自定义右键菜单 -->
    <context-menu @on-menu-click="(type) => type === 'setting' && (showThemeDialog = true)"></context-menu>
    <!-- <div class="top-btn" v-if="isAsideFixed" @click="onScrollToTop">回到顶部<i class="icon-top"></i></div> -->
  </div>
</template>
<script>
import Header from './header'
import Footer from './footer'
import Aside from './aside'
import Cover from './cover'
import Notice from '@/components/Notice'
import Theme from '@/components/Theme'
import ContextMenu from '@/components/contextmenu'
import routes from '@/config/routes'
import { changeTheme } from '@/utils'

export default {
    components: {
        Header,
        Footer,
        Aside,
        Cover,
        Notice,
        Theme,
        ContextMenu
    },
    transition: {
        name: 'page',
        mode: 'out-in'
    },
    data () {
        return {
            showThemeDialog: false,
            // tagList: [],
            isHeadFixed: false,
            isAsideFixed: false,
            scrollObj: {},
            isNight: false,
            loading: true,
            showLayout: true,
            routes,
            userAgent: '' // 浏览器信息
        }
    },
    computed: {
        banner ({ app, store }) {
            const { banner } = this.$store.state.websiteConfig
            return banner
        },
        categoryList () {
            return this.$store.state.asideConfig.categoryList
        },
        tagList () {
            return this.$store.state.asideConfig.tagList
        },
        categoryTotal () {
            return this.$store.state.asideConfig.categoryTotal
        },
        tagTotal () {
            return this.$store.state.asideConfig.tagTotal
        },
        currentTime () {
            return this.$store.state.currentTime
        },
        themeConfig () {
            // console.log(this.$store.state.themeConfig, 'this.$store.state.themeConfig')
            return this.$store.state.themeConfig
        },
        sideWhiteRoute () {
            return this.routes.filter(el => !el.meta.hideAside).map(el => el.path)
        }
    },
    watch: {
        isNight (val) {
            val && window.localStorage.setItem('theme', val)
            !val && window.localStorage.removeItem('theme')
            val && (document.documentElement.classList = 'night')
            !val && (document.documentElement.classList = '')
        }
    },
    created () {
        // console.log(this.$route, '$route')
    },
    mounted () {
        this.scroll((res) => {
            if (res || this.scrollObj.scrollTop === 0) {
                this.isHeadFixed = false
            } else {
                this.isHeadFixed = true
            }
        })
        setTimeout(() => {
            this.loading = false
        }, 300)
        // this.$nextTick(() => {
        //     new window.Swiper('.weatherSwiper', this.swiperOption)
        // })
        this.toggleMobile() // 根据浏览器器窗口切换服务
        const localThemeConfig = JSON.parse(JSON.stringify(this.$store.state.themeConfig))
        changeTheme('', localThemeConfig).then(res => {
            let themeConfig = {
                picIndex: localThemeConfig.picIndex || res.picIndex,
                colorIndex: localThemeConfig.colorIndex || res.colorIndex,
                localBgUrls: localThemeConfig.localBgUrls || res.localBgUrls,
                themeColor: localThemeConfig.themeColor || res.themeColor,
                bgUrl: localThemeConfig.bgUrl || res.bgUrl,
                colors: localThemeConfig.colors || res.colors,
                bgUrlIndex: localThemeConfig.bgUrlIndex || res.bgUrlIndex
            }
            this.$store.dispatch('themeChanged', {
                ...themeConfig,
                themeChanged: !this.$store.state.themeChanged
            })
        })
        window.addEventListener('dblclick', (e) => {
            e.stopImmediatePropagation()
            this.showLayout = !this.showLayout
        })
    },
    methods: {
        scroll (fn) {
            let beforeScrollTop = document.scrollingElement.scrollTop
            fn = fn || function () {}
            window.addEventListener('scroll', () => {
                var afterScrollTop = document.scrollingElement.scrollTop
                this.scrollObj.scrollTop = document.scrollingElement.scrollTop
                this.scrollObj.value = afterScrollTop - beforeScrollTop
                if (afterScrollTop >= 80) {
                    this.isAsideFixed = true
                } else {
                    this.isAsideFixed = false
                }
                if (this.scrollObj.value === 0) { return false }
                fn(this.scrollObj.value > 0)
                beforeScrollTop = afterScrollTop
            })
        },
        onScrollToTop () {
            let step = 50
            let timer = setInterval(() => {
                let scrollTop = window.scrollY
                // if (scrollTop < 100) {
                //     step = 5
                // } else
                if (scrollTop > 1500) {
                    step = 800
                } else {
                    step = 50
                }
                if (scrollTop - step < 0) {
                    step = 50
                    window.scrollTo(0, 0)
                    clearInterval(timer)
                }
                window.scrollTo(0, scrollTop - step)
            }, 10)
        },
        toggleMobile () {
            this.userAgent = navigator.userAgent
            window.addEventListener('resize', () => {
                if (this.userAgent !== navigator.userAgent) {
                    window.location.reload(true)
                    this.userAgent = navigator.userAgent
                }
            })
        }
    }
}
</script>
<style>
html {
  /* font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif; */
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>
